<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>选择一封信 💌</title>
  <link rel="stylesheet" href="style.css" />
  <style>
    body {
      background: linear-gradient(to bottom, #ffeef3, #fff0f5);
      font-family: 'Helvetica Neue', sans-serif;
      text-align: center;
      padding: 2em 1em;
      position: relative;
      overflow: hidden;
    }
    h1 {
      color: #e91e63;
      margin-bottom: 1em;
      position: relative;
      z-index: 1;
    }
    .letter-options {
      display: flex;
      flex-direction: column;
      gap: 1.5em;
      max-width: 400px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }
    .letter-button {
      background: #fff6fb;
      color: #e91e63;
      border: 2px solid #e91e63;
      padding: 1em;
      border-radius: 16px;
      font-size: 16px;
      cursor: pointer;
      transition: 0.3s;
    }
    .letter-button:hover {
      background: #e91e63;
      color: white;
    }
    .nav {
      margin-top: 2em;
      position: relative;
      z-index: 1;
    }
    .nav a {
      text-decoration: none;
      color: #e91e63;
      font-size: 14px;
    }
    .hidden-heart {
      position: fixed;
      bottom: 16px;
      right: 16px;
      font-size: 24px;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 0.3s;
      z-index: 1;
    }
    .hidden-heart:hover {
      opacity: 1;
    }

    /* 背景圆圈动画 */
    .circle {
      position: fixed;
      border-radius: 50%;
      background: radial-gradient(circle at center, rgba(255,255,255,1), rgba(255,255,255,0.3));
      animation: circlePulse 6s ease-in-out infinite;
      z-index: -1;
    }
    @keyframes circlePulse {
      0%, 100% { transform: scale(1); }
      50%     { transform: scale(1.1); }
    }

    /* 圆圈位置 */
    .circle-left { left: -100px; top: 50%; transform: translateY(-50%); width: 1000px; height: 1000px; }
    .circle-left-mirror { right: -100px; top: 50%; transform: translateY(-50%); width: 1000px; height: 1000px; }
    .circle-2 { left: 20%; top: 20%; width: 400px; height: 400px; }
    .circle-2-mirror { right: 20%; bottom: 20%; width: 400px; height: 400px; }
    .circle-3 { right: 10%; top: 70%; width: 600px; height: 600px; }
    .circle-3-mirror { left: 10%; bottom: 70%; width: 600px; height: 600px; }
    .circle-4 { right: 30%; top: 10%; width: 300px; height: 300px; }
    .circle-4-mirror { left: 30%; bottom: 10%; width: 300px; height: 300px; }
    .circle-5 { left: 10%; top: 80%; width: 500px; height: 500px; }
    .circle-5-mirror { right: 10%; bottom: 80%; width: 500px; height: 500px; }
    .circle-6 { right: 20%; top: 40%; width: 700px; height: 700px; background: radial-gradient(circle at center, #ffffff, rgba(240,183,212,0.3)); }
    .circle-6-mirror { left: 20%; bottom: 40%; width: 700px; height: 700px; background: radial-gradient(circle at center, #ffffff, rgba(240,183,212,0.3)); }
    .circle-7 { left: 30%; top: 60%; width: 440px; height: 440px; background: radial-gradient(circle at center, #ffffff, rgba(228,184,206,0.3)); }
    .circle-7-mirror { right: 30%; bottom: 60%; width: 440px; height: 440px; background: radial-gradient(circle at center, #ffffff, rgba(228,184,206,0.3)); }
    .circle-8 { right: 5%; top: 25%; width: 360px; height: 360px; }
    .circle-8-mirror { left: 5%; bottom: 25%; width: 360px; height: 360px; }
  </style>
</head>
<body>
  <!-- 背景圈圈 -->
  <div class="circle circle-left"></div>
  <div class="circle circle-left-mirror"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-2-mirror"></div>
  <div class="circle circle-3"></div>
  <div class="circle circle-3-mirror"></div>
  <div class="circle circle-4"></div>
  <div class="circle circle-4-mirror"></div>
  <div class="circle circle-5"></div>
  <div class="circle circle-5-mirror"></div>
  <div class="circle circle-6"></div>
  <div class="circle circle-6-mirror"></div>
  <div class="circle circle-7"></div>
  <div class="circle circle-7-mirror"></div>
  <div class="circle circle-8"></div>
  <div class="circle circle-8-mirror"></div>

  <h1>选择一封信 💌</h1>
  <div class="letter-options">
    <a class="letter-button" href="letter1.html">📜 信件一：你是我生命中的光</a>
    <a class="letter-button" href="letter2.html">📜 信件二：与你一起变得更好</a>
    <a class="letter-button" href="letter3.html">📜 信件三：写给未来的我们</a>
    <a class="letter-button" href="love-game.html">🎁 结尾页：未来的路，一起走吧</a>
  </div>
  <div class="nav">
    <a href="story.html">← 回到我们的故事</a>
  </div>

  <!-- 彩蛋入口：右下角小爱心 -->
  <div class="hidden-heart" onclick="location.href='easter_egg.html'">💖</div>
</body>
</html>
